/* Media Responsiveness */

/* Large screens (desktop) */
@media (min-width: 1024px) {
  body {
    background-color: aquamarine;
  }
}

/* Medium screens (tablet) */
@media (min-width: 768px) and (max-width: 960px) {
  #mediaLeft {
    order: 1;
  }

  #mediaLeft card {
    max-width: 200px;
  }

  #mediaLeft audio {
    max-width: 150px;
  }

  .tab-pane #nav-basics {
    overflow: scroll!important;
  }

  .tab-pane #nav-appearance {
    overflow: scroll!important;
  }

  .tab-pane #nav-personality {
    overflow: scroll!important;
  }

  .tab-pane #nav-background {
    overflow: scroll!important;
  }

  #infoRight {
    order: 2;
  }
}

/* Small screens (mobile) */
@media (max-width: 767px) {
  .window {
    width: 90vw;
    height: auto;
  }

  .tab-pane #nav-basics {
    overflow: scroll!important;
  }

  .tab-pane #nav-appearance {
    overflow: scroll!important;
  }

  .tab-pane #nav-personality {
    overflow: scroll!important;
  }

  .tab-pane #nav-background {
    overflow: scroll!important;
  }

  #mediaLeft {
    order: 1;
  }

  #mediaLeft card {
    max-width: 100px;
  }

  #mediaLeft audio {
    max-width: 50px;
  }

  #infoRight {
    order: 2;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .window {
    width: 100vw;
    height: auto;
  }

  .tab-pane #nav-basics {
    overflow: scroll!important;
  }

  .tab-pane #nav-appearance {
    overflow: scroll!important;
  }

  .tab-pane #nav-personality {
    overflow: scroll!important;
  }

  .tab-pane #nav-background {
    overflow: scroll!important;
  }

  #mediaLeft {
    order: 1;
  }

  #mediaLeft card {
    max-width: 100px;
  }

  #mediaLeft audio {
    max-width: 50px;
  }

  #infoRight {
    order: 2;
  }

}